<template>
<transition >
      <div v-if="judge" ref="citysbox" class="citysbox">
      <div ref="cityall" class="cityall">
      <ul @click="uls($event)">
          <li v-for="item in datas" :key="item.id">{{item.name}}</li>
      </ul>
    </div>
    <div @click="citys" class="bottoms">
    </div>
  </div>
</transition>
</template>

<script>
import { mapState,mapMutations} from 'vuex'
export default {
    data(){
        return{
            flag:false,
            datas:[]
        }
    },
    methods:{
     ...mapMutations(['fn','fn1']),
        citys(){
            this.fn1()            
        },
        uls(event){

        },
    },
     computed:{
        ...mapState(["login",'judge'])
    },
    created:async function(){
        let {data} = await this.$http.get("/loginapi/getcitys")
        let Data = data.Data
        this.datas= Data
    }
}
</script>

<style  scoped>
.citysbox{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 40;
    top: 1rem;
    left: 0;
     background-color: rgba(0,0,0,.5);
}
.cityall{
    width: 100%;
    max-height: 67%;
    background-color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
ul{

    width: 100%;
    height: 100%;
    overflow: auto;
}
ul>li{
    width: 100%;
    height: .9rem;
    border-bottom: .01rem solid #ccc;
    background-color: #fff;
    font-size: .3rem;
    line-height: .9rem;
   text-align: left;
   padding-left: .3rem;
   font-weight: 700;


}
.bottoms{
    width: 100%;
    height: 100%;
    content: "";
    flex: 1;

}
</style>